<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试网页</title>
    <script src="../js/jquery-1.11.3.js"></script>
    <script src="../js/vue.js"></script>
    <link rel="stylesheet" href="../css/element.css">
    <script src="../js/element.js"></script>
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</head>
<body>
<div id="app">
    <form id="form">
        <div class="input-group input-group-sm">
            <span class="input-group-addon" id="sizing-addon1">关键字搜索:</span>
            <input type="text" class="form-control" name="like" aria-describedby="sizing-addon1" style="width: 350px">
        </div>

        <select name="state" id="s">
            <option value="2">状态查询</option>
            <option v-for="state in states" v-if="state==0" :value="state">启用</option>
            <option v-for="state in states" v-if="state==1" :value="state">停用</option>
        </select>
        <input type="button" value="批量删除" @click="deleteMore()">
        <input type="button" value="搜索" @click="search()">
        <input type="hidden" name="pagenumber" :value=page.pageNumber>
        <input type="hidden" name="pagesize" :value=page.pageSize>
    </form>
    <table class="table table-hover">
        <tr>
            <th>选项</th>
            <th>序号</th>
            <th>仓库名称</th>
            <th>负责人</th>
            <th>联系电话</th>
            <th>地址</th>
            <th>关联门店</th>
            <th>状态</th>
            <th>操作</th>
        </tr>
        <tr v-for="(store,index) in stores ">
            <td><input type="checkbox" :value="index" v-model="checkboxs" @click="dian(store.store_id)" class="allInput" ></td>
            <td>{{index+1}}</td>
            <td>{{store.store_name}}</td>
            <td>{{store.store_people}}</td>
            <td>{{store.store_tel}}</td>
            <td>{{store.store_address}}</td>
            <td>{{store.shop_name}}</td>
            <td v-if="store.store_state==0">启用</td>
            <td v-if="store.store_state==1">停用</td>
            <td>
                <input  type="button" value="修改" class="btn btn-info" data-toggle="modal" data-target="#login-modal" @click="get(store)"/>
            </td>
        </tr>
    </table>
    <!-- 模态框（Modal） -->
    <div class="modal" id="login-modal" tabindex="-1">
        <div class="modal-dialog">
            <div class="modal-content">

                <!--头部-->
                <div class="modal-header">
                    <!--<div style="height: 87px;">-->
                    <h3 class="col-md-4" style="line-height: 10px;">修改用户信息</h3>
                    <button class="close col-md-1 col-md-offset-7 text-right"
                            data-dismiss="modal" style="line-height: 20px;">×</button>
                    <!--</div>-->
                </div>

                <!--主体部分-->
                <div class="modal-body" id="admission">
                    <form class="form-horizontal" id="form2">
                        <!--仓库id-->
                        <input type="hidden"  id="ckid" name="ck_id" value="0">

                        <!--输入仓库名称-->
                        <div class="form-group">
                            <label for="ckname" class="col-md-2 control-label">仓库名字</label>
                            <div class="col-md-10">
                                <input type="text" name="ck_name" id="ckname"
                                       class="form-control" style="width: 300px;" :value="store.store_name"  />
                            </div>
                        </div>

                        <!--输入仓库联系人-->
                        <div class="form-group">
                            <label for="ckpeople" class="col-md-2 control-label">联系人</label>
                            <div class="col-md-10">
                                <input type="text" name="ck_people" id="ckpeople"
                                       class="form-control" style="width: 300px;" :value="store.store_people"  />
                            </div>
                        </div>

                        <!--输入仓库联系方式-->
                        <div class="form-group">
                            <label for="cktel" class="col-md-2 control-label">联系方式</label>
                            <div class="col-md-10">
                                <input type="text" name="ck_tel" id="cktel"
                                       class="form-control" style="width: 300px;" :value="store.store_tel"  />
                            </div>
                        </div>
                        <!--关联门店-->
                        <div class="form-group">
                            <label for="ckmd" class="col-md-2 control-label">关联门店</label>
                            <div class="col-md-10">
                                <input type="text" name="ck_md" id="ckmd"
                                       class="form-control" style="width: 300px;" :value="store.shop_name" disabled />
                            </div>
                        </div>
                        状态:<input type="radio" name="ck_state" value="0">启用  <input type="radio" value="1" name="ck_state">停用
                        <!--提交按钮-->
                        <div class="form-group">
                            <div class="col-md-offset-2 col-md-10">
                                <input type="button" class="btn btn-success" @click="update()" value="提交" >
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button data-dismiss="modal" class="btn btn-info">底部-隐藏</button>
                </div>
            </div>
        </div>
    </div>




    当前是第<span>{{page.pageNumber}}</span>页
    总共有<span>{{page.pages}}</span>页
    总共有<span>{{page.total}}</span>条数据
    <input type="button" value="上一页" @click="prev()">
    <input type="button" value="下一页" @click="next()">


    <a href="http://localhost:8090/home">返回上一页</a>
</div>

<script>
    let str="";
    let _this;
    let app=new Vue({
        el:"#app",
        data:{
            //tables:_this.stores,
            //状态
            states:[],
            //每一行数据
            stores:[],
            //页码数据
            page:{
                pageNumber:1,
                pageSize:10,
                pages:"",
                total:"",
            },
            //多选框
            checkboxs:[],
            //输入框的回显
            store:"",
            //多选框中的主键id
            mainId:[],
        },
        mounted:function(){
            _this=this;
            _this.getState();
            _this.search();
        },
        methods:{

            //查询状态
            getState:function(){
                $.ajax({
                    url:"/getState",
                    dataType:"json",
                    success:function(data){
                        _this.states=data.list;
                    }
                })
            },
            //模糊查询所有信息
            search:function () {
                $.ajax({
                    url:"/getInfo",
                    data:$("#form").serialize(),
                    dataType:"json",
                    success:function (data) {
                        _this.stores=data.obj.list;
                        _this.page.pages=data.obj.pages;
                        _this.page.total=data.obj.total;
                    }
                })
            },
            prev:function () {
                if(_this.page.pageNumber==1){
                    alert("已经是第一页了")
                }else{
                    _this.page.pageNumber= _this.page.pageNumber-1;
                    _this.search();
                }
            },
            next:function () {
                if(_this.page.pageNumber<_this.page.pages){
                    _this.page.pageNumber= _this.page.pageNumber+1;
                    _this.search();
                }else{
                    alert("已经是最后一页了")
                }
            },
            //修改数据的方法
            update:function () {
                $.ajax({
                    url:"/updateAll",
                    data:$("#form2").serialize(),
                    dataType:"json",
                    success:function (data) {
                        alert("修改成功!")
                        _this.search();
                    }
                })
            },
            //渲染隐藏域中的主键id
            get:function(store){
                $("#ckid").val(store.store_id);
                _this.store=store;
            },
            //多选框单机事件
            dian:function(id){
                _this.mainId.length=0;
                _this.mainId.push(id);
                console.log(_this.mainId);
                for(let i=0;i<_this.mainId.length;i++){
                    str=str+_this.mainId[i]+",";
                }
                console.log(str);
            },
            //批量删除
            deleteMore:function(){
                $.ajax({
                    url:"/deleteAll",
                    data:{
                        "str":str,
                    },
                    dataType:"json",
                    success:function (data) {
                        alert("删除成功!")
                    }
                })
                let allInfo=_this.checkboxs.sort();
                for(let i=allInfo.length-1;i>=0;i--){
                    _this.stores.splice(allInfo[i],1);
                }
                _this.checkboxs.length=0;
            },
        },
    })

</script>
</body>
</html>